<template>
	<view style="height: 100%">

		<view class="header">
			<view class="user_info" style="margin-top: 30rpx;margin-bottom: 30rpx;">
				<view class="users">

					<view class="icons" @click="chooseImage">

						<image v-if="userInfo.avatar" :src="IMAGE_BASE + '/dev-api' + userInfo.avatar"
							style="width:100rpx;height:100rpx" class="rounded-circle"></image>
						<image v-else src="/static/images/l.png" style="width:100rpx;height:100rpx" class="rounded-circle"></image>
					</view>
					<view class="info">
						<view class="title" v-if="userInfo.username">{{ userInfo.nickname || userInfo.username }}</view>
						<view class="title" v-else @click="logout">请先登录</view>
					</view>
				</view>
			</view>
		</view>

		<view class="content">

			<view class="user_list">
				<view class="item" @click="showEditDialog">
					<view class="left">修改信息</view>
					<view class="right">
						<image mode="heightFix" src="/static/images/right.png"></image>
					</view>
				</view>

				<view style="border-bottom: 1px solid #e5e5e5;" class="item" @click="showAboutDialog">
					<view class="left">关于我们</view>
					<view class="right">
						<image mode="heightFix" src="/static/images/right.png"></image>
					</view>
				</view>

				<view class="item" @click="logout">
					<view class="left">退出登录</view>
					<view class="right">
						<image mode="heightFix" src="/static/images/right.png"></image>
					</view>
				</view>

			</view>
		</view>

		<!-- 修改信息弹窗 -->
		<uni-popup ref="editPopup" type="center">
			<view class="edit-popup">
				<view class="popup-title">修改信息</view>
				<view class="input-item">
					<text class="label">昵称：</text>
					<input type="text" v-model="editForm.nickname" placeholder="请输入昵称" />
				</view>
				<view class="input-item">
					<text class="label">邮箱：</text>
					<input type="text" v-model="editForm.email" placeholder="请输入邮箱" />
				</view>
				<view class="input-item">
					<text class="label">手机：</text>
					<input type="text" v-model="editForm.phone" placeholder="请输入手机号" />
				</view>
				<view class="popup-btns">
					<button class="btn cancel" @click="hideEditDialog">取消</button>
					<button class="btn confirm" @click="submitEdit">确定</button>
				</view>
			</view>
		</uni-popup>

		<!-- 关于我们弹窗 -->
		<uni-popup ref="aboutPopup" type="center">
			<view class="about-popup">
				<view class="popup-title">关于我们</view>
				<view class="about-content">
					<view class="platform-name">枣庄旅游平台</view>
					<view class="platform-desc">
						欢迎使用枣庄旅游平台！我们致力于为游客提供最优质的旅游服务体验。
					</view>
					<view class="feature-list">
						<view class="feature-item">
							<text class="feature-title">景点推荐</text>
							<text class="feature-desc">精选枣庄特色景点，带您领略枣庄之美</text>
						</view>
						<view class="feature-item">
							<text class="feature-title">旅游攻略</text>
							<text class="feature-desc">专业的旅游攻略，让您的旅程更加轻松愉快</text>
						</view>
						<view class="feature-item">
							<text class="feature-title">酒店住宿</text>
							<text class="feature-desc">严选优质酒店，为您提供舒适的住宿体验</text>
						</view>
					</view>
					<view class="contact-info">
						<text>联系电话：0632-XXXXXXXX</text>
						<text>服务时间：周一至周日 9:00-18:00</text>
					</view>
				</view>
				<button class="close-btn" @click="hideAboutDialog">关闭</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { updateUserInfo } from '@/api/user.js'
import config from '../../api/config.js'

const BASE_API = config.admin_base_api
const IMAGE_BASE = config.image_base
export default {
	data () {
		return {
			userInfo: {},
			editForm: {
				nickname: '',
				email: '',
				phone: ''
			},
			IMAGE_BASE: config.image_base
		}
	}
    /**
     * 生命周期函数--监听页面加载
     */,
	onLoad: function (options) { },
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function () { },
	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow: function () {
		this.userInfo = uni.getStorageSync('userInfo')
	},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function () { },
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function () { },
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function () { },
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function () { },
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function () { },
	methods: {
		go (url) {
			uni.navigateTo({
				url: url,
				success: res => { },
				fail: () => {
					uni.switchTab({
						url: url
					})
				},
				complete: () => { }
			})
		},
		logout () {
			uni.setStorageSync('token', '')
			uni.setStorageSync('uid', '')
			uni.setStorageSync('userInfo', {})
			uni.navigateTo({
				url: '/pages/login/index',
				success: res => { },
				fail: () => { },
				complete: () => { }
			})
		},
		initEditForm () {
			this.editForm = {
				nickname: this.userInfo.nickname || '',
				email: this.userInfo.email || '',
				phone: this.userInfo.phone || ''
			}
		},
		showEditDialog () {
			this.initEditForm()
			this.$refs.editPopup.open()
		},
		hideEditDialog () {
			this.$refs.editPopup.close()
		},
		chooseImage () {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const tempFilePath = res.tempFilePaths[0]
					// 检查文件大小
					uni.getFileInfo({
						filePath: tempFilePath,
						success: (fileInfo) => {
							if (fileInfo.size > 2 * 1024 * 1024) {
								uni.showToast({
									title: '图片大小不能超过2MB',
									icon: 'none'
								})
								return
							}
							this.uploadAvatar(tempFilePath)
						}
					})
				}
			})
		},
		uploadAvatar (tempFilePath) {
			uni.showLoading({
				title: '上传中...'
			})
			// 上传图片
			uni.uploadFile({
				url: config.admin_base_api + '/wx/common/upload',
				filePath: tempFilePath,
				name: 'file',
				header: {
					Authorization: 'Bearer ' + uni.getStorageSync('token')
				},
				success: (uploadRes) => {
					const data = JSON.parse(uploadRes.data)
					if (data.code === 200) {
						// 更新用户头像
						this.updateUserInfo({
							avatar: data.avatar
						})
						// 更新本地显示
						this.userInfo.avatar = data.avatar
						uni.setStorageSync('userInfo', this.userInfo)
					} else {
						uni.showToast({
							title: data.msg || '上传失败',
							icon: 'none'
						})
					}
				},
				fail: () => {
					uni.showToast({
						title: '上传失败',
						icon: 'none'
					})
				},
				complete: () => {
					uni.hideLoading()
				}
			})
		},
		updateUserInfo (data) {
			updateUserInfo(data).then(res => {
				if (res.code === 200) {
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					})
					// 更新本地存储的用户信息
					uni.setStorageSync('userInfo', res.data)
					this.userInfo = res.data
				}
			})
		},
		submitEdit () {
			// 表单验证
			if (this.editForm.phone && !/^1[3-9]\d{9}$/.test(this.editForm.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				})
				return
			}
			if (this.editForm.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.editForm.email)) {
				uni.showToast({
					title: '邮箱格式不正确',
					icon: 'none'
				})
				return
			}
			this.updateUserInfo(this.editForm)
			this.hideEditDialog()
		},
		showAboutDialog () {
			this.$refs.aboutPopup.open()
		},
		hideAboutDialog () {
			this.$refs.aboutPopup.close()
		}
	}
}
</script>
<style>
/* pages/user/user.wxss */

page {
	background-color: #f8f8f8;
}

.header {
	width: auto;
	padding: 20rpx 0;
	background-color: ghostwhite;
	border: 1px solid #dfdeec;
	margin: 20rpx;
	border-radius: 10rpx;
}

.user_info {
	width: 90%;
	margin: 30rpx auto 0;
	background-color: ghostwhite;
	padding: 20rpx;
	border-radius: 10rpx;
}

.icons image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	border: 2rpx solid #fff;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.info .title {
	color: black;
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 5rpx;
}

.content {
	width: 90%;
	margin: 30rpx auto;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.user_list .item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
}

.item .left {
	color: #333;
	font-size: 30rpx;
	font-weight: bold;
}

.item .right image {
	width: 24rpx;
	height: 24rpx;
	margin-top: 4rpx;
}

/* 移除浮动，使用Flex布局提高响应性 */
.user_info .users,
.users .info {
	display: flex;
	align-items: center;
}

/* 点击区域优化，使其看起来更自然 */
.item {
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}

.item:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

.edit-popup {
	background: #fff;
	width: 600rpx;
	padding: 30rpx;
	border-radius: 20rpx;

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.input-item {
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;

		.label {
			width: 120rpx;
			font-size: 28rpx;
			color: #333;
		}

		input {
			flex: 1;
			height: 70rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
		}
	}

	.popup-btns {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;

		.btn {
			width: 45%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin: 0;

			&.cancel {
				background: #f5f5f5;
				color: #666;
			}

			&.confirm {
				background: #f56c6c;
				color: #fff;
			}
		}
	}
}

.icons {
	position: relative;

	&:after {
		content: '更换头像';
		position: absolute;
		bottom: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 20rpx;
		color: #666;
		white-space: nowrap;
	}
}

.about-popup {
	background: #fff;
	width: 600rpx;
	padding: 40rpx 30rpx;
	border-radius: 20rpx;

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: #333;
	}

	.about-content {
		.platform-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.platform-desc {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 30rpx;
			text-align: justify;
		}

		.feature-list {
			margin-bottom: 30rpx;

			.feature-item {
				margin-bottom: 20rpx;

				.feature-title {
					display: block;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
				}

				.feature-desc {
					display: block;
					font-size: 26rpx;
					color: #666;
					line-height: 1.4;
				}
			}
		}

		.contact-info {
			border-top: 1rpx solid #eee;
			padding-top: 20rpx;

			text {
				display: block;
				font-size: 24rpx;
				color: #999;
				line-height: 1.8;
			}
		}
	}

	.close-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #f56c6c;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin-top: 30rpx;

		&:after {
			border: none;
		}
	}
}
</style>
